<template>
    <div class="Community">
      <el-row class="body">
        <el-col class="left" :span="15">
          <el-row class="left-top">
            <el-col :span="8">
              <el-button-group>
                <el-button @click="showAll">全部帖</el-button>
                <el-button @click="showTop">置顶帖</el-button>
                <el-button @click="showEssence">精品帖</el-button>
              </el-button-group>
            </el-col>
            <el-col :offset="1" :span="7" >
              <el-input placeholder="搜索内容" v-model="search"></el-input>
            </el-col>
            <el-col :offset="4" :span="4">
              <router-link tag="button" :to="{name:'CommunityRelease'}">
                <el-button type="success">发布帖子</el-button>
              </router-link>
            </el-col>
          </el-row>
          <div class="contents">
            <el-row class="content" v-for="(content,index) in contents" :key="index">
              <router-link :to="{name:'CommunityDetails', params: {id:content.id}}">
                <el-col class="content-left" :span="1">
                  <el-image
                    :src="content.avatar"
                    fit="fill"></el-image>
                </el-col>
                <el-col class="content-mid" :offset="1" :span="12">
                  <div class="top">
                    <h4 class="title">{{content.title}}<span class="top" v-if="content.isTop">置顶</span><span class="essence" v-if="content.isEssence">精华</span></h4>
                  </div>
                  <div class="content-bottom">
                    <span class="user">{{content.user}}</span>
                    <span class="date">{{content.date}}</span>
                    <span class="tags">
                      <span class="tag" v-for="tag in content.tags">{{tag}}</span>
                    </span>
                  </div>
                </el-col>
                <el-col class="comment content-right" :span="2" :offset="8">
                  <i class="el-icon-chat-dot-square"></i>{{content.comment}}
                </el-col>
              </router-link>
            </el-row>
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="pageSize"
              :current-page.sync="currentPage"
              :total="total"
              >
            </el-pagination>
          </div>
        </el-col>
        <el-col class="right" :offset="1" :span="8">
          <div class="newUsers">
            <div class="title">近一个月的新用户 <span>TOP12</span></div>
            <div class="users">
              <div class="user" v-for="(user,index) in communityInfo.users" :key="index">
                <el-image
                  :src="user.avatar"
                  fit="fill"></el-image>
                  <div class="username">{{user.username}}</div>
              </div>
            </div>
          </div>
          <div class="hotPost">
            <div class="title">近一个月热门帖子</div>
            <div class="posts">
              <router-link tag="div"
                          :to="{name:'CommunityDetails', params: {id:post.id}}"
                          class="post" v-for="(post,index) in communityInfo.posts" :key="index">
                {{post.title}}
                <span class="comment"><i class="el-icon-chat-dot-square"></i>{{post.comment}}</span>
                <el-divider></el-divider>
              </router-link>
            </div>
          </div>
        </el-col>
      </el-row>
      <loading :show="loading" />
    </div>
</template>

<script>
  import loading from "../common/Load/Load";
    export default {
        name: "Community",
        data(){
          return {
            loading:false,
            show:{
              all:true,
              top:false,
              essence:false
            },
            currentPage:1,
            pageSize:7,
            total:null,
            search:null,
            communityInfoTest:{
              contentsList:[
                {
                  id:1,
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  title:"深入学习jvm1",
                  isTop:true,
                  isEssence:false,
                  user:"啦啦啦",
                  date:"2017-09-01 22:10:42",
                  tags:["JVM1","JVM2","JVM3","JVM4",],
                  comment:100
                },
                {
                  id:1,
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  title:"深入学习jvm1",
                  isTop:true,
                  isEssence:false,
                  user:"啦啦啦",
                  date:"2017-09-01 22:10:42",
                  tags:["JVM1","JVM2","JVM3","JVM4",],
                  comment:100
                }, {
                  id:1,
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  title:"深入学习jvm1",
                  isTop:true,
                  isEssence:false,
                  user:"啦啦啦",
                  date:"2017-09-01 22:10:42",
                  tags:["JVM1","JVM2","JVM3","JVM4",],
                  comment:100
                }, {
                  id:1,
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  title:"深入学习jvm1",
                  isTop:true,
                  isEssence:false,
                  user:"啦啦啦",
                  date:"2017-09-01 22:10:42",
                  tags:["JVM1","JVM2","JVM3","JVM4",],
                  comment:100
                }, {
                  id:1,
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  title:"深入学习jvm1",
                  isTop:true,
                  isEssence:false,
                  user:"啦啦啦",
                  date:"2017-09-01 22:10:42",
                  tags:["JVM1","JVM2","JVM3","JVM4",],
                  comment:100
                }, {
                  id:1,
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  title:"深入学习jvm1",
                  isTop:true,
                  isEssence:false,
                  user:"啦啦啦",
                  date:"2017-09-01 22:10:42",
                  tags:["JVM1","JVM2","JVM3","JVM4",],
                  comment:100
                }, {
                  id:1,
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  title:"深入学习jvm1",
                  isTop:true,
                  isEssence:false,
                  user:"啦啦啦",
                  date:"2017-09-01 22:10:42",
                  tags:["JVM1","JVM2","JVM3","JVM4",],
                  comment:100
                }, {
                  id:1,
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  title:"深入学习jvm1",
                  isTop:true,
                  isEssence:false,
                  user:"啦啦啦",
                  date:"2017-09-01 22:10:42",
                  tags:["JVM1","JVM2","JVM3","JVM4",],
                  comment:100
                }, {
                  id:1,
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  title:"深入学习jvm1",
                  isTop:true,
                  isEssence:false,
                  user:"啦啦啦",
                  date:"2017-09-01 22:10:42",
                  tags:["JVM1","JVM2","JVM3","JVM4",],
                  comment:100
                }, {
                  id:1,
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  title:"深入学习jvm1",
                  isTop:true,
                  isEssence:false,
                  user:"啦啦啦",
                  date:"2017-09-01 22:10:42",
                  tags:["JVM1","JVM2","JVM3","JVM4",],
                  comment:100
                }, {
                  id:1,
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  title:"深入学习jvm1",
                  isTop:true,
                  isEssence:false,
                  user:"啦啦啦",
                  date:"2017-09-01 22:10:42",
                  tags:["JVM1","JVM2","JVM3","JVM4",],
                  comment:100
                }, {
                  id:1,
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  title:"深入学习jvm1",
                  isTop:true,
                  isEssence:false,
                  user:"啦啦啦",
                  date:"2017-09-01 22:10:42",
                  tags:["JVM1","JVM2","JVM3","JVM4",],
                  comment:100
                },
              ],
              users:[
                {
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  username:"鑫鑫1号"
                },
                {
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  username:"鑫鑫2号"
                },
                {
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  username:"鑫鑫3号"
                },
                {
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  username:"鑫鑫1号"
                },
                {
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  username:"鑫鑫1号"
                },
                {
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  username:"鑫鑫1号"
                },
                {
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  username:"鑫鑫1号"
                },
                {
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  username:"鑫鑫1号"
                },
                {
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  username:"鑫鑫1号"
                },
                {
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  username:"鑫鑫1号"
                },
                {
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  username:"鑫鑫1号"
                },
                {
                  avatar:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  username:"鑫鑫1号"
                },
              ],
              posts:[
                {id:1,title:"饿了",comment:15},
                {id:1,title:"真饿了",comment:15},
                {id:1,title:"真饿了1",comment:15},
                {id:1,title:"真饿了2",comment:15},
                {id:1,title:"真饿了3",comment:15},
                {id:1,title:"真饿了4",comment:15},
              ],
            },
            communityInfo:{
              contentsList:[],
              users:[],
              posts:[],
            }
          }
        },
        watch:{
        },
        computed:{
          contents(){
            let j=0;
            let search=this.search;
            let arr=[];
            if(this.show.all){
              for (let i=(this.currentPage-1)*7; i < (this.currentPage*7); i++,j++) {
                if(!this.communityInfo.contentsList[i])
                  break;
                arr.push(this.communityInfo.contentsList[i]);
              }
              this.total=this.communityInfo.contentsList.length;
            }else if(this.show.essence){
              this.communityInfo.contentsList.map(function (item) {
                if (item.isEssence) {
                  arr.push(item);
                }
              });
              this.total=arr.length;
            }else{
              this.communityInfo.contentsList.map(function (item) {
                if (item.isTop) {
                  arr.push(item);
                }
              });
              this.total=arr.length;
            }
            if(search){
              let newArr=[];
              if(this.show.all){
                this.communityInfo.contentsList.map(function (item) {
                  if (item.title.search(search) != -1) {
                    newArr.push(item);
                  }
                });
              }else{
                arr.map(function (item) {
                  if (item.title.search(search) != -1) {
                    newArr.push(item);
                  }
                });
              }
              this.total=newArr.length;
              return newArr;
            }
            return arr;
          }
        },
        methods:{
          showAll(){
            this.show.all=true;
            this.show.top=false;
            this.show.essence=false;
          },
          showEssence(){
            this.show.all=false;
            this.show.top=false;
            this.show.essence=true;
          },
          showTop(){
            this.show.all=false;
            this.show.top=true;
            this.show.essence=false;
          }
        },
        components: {
          loading
        },
        mounted() {
          this.loading = true;
          // this.communityInfo=this.communityInfoTest;
          this.$axios({
            url:'http://47.92.167.153:8085/community/index',
            method:'get',
          }).then((res)=>{
            res=res.data;
            if(res.success){
              res=res.data;
              this.communityInfo=res;
            }
          }).catch(function(error){
            console.log(error)
          });
          setTimeout(() => {
            this.loading = false;
          }, 1500);
        }
    }
</script>

<style scoped lang="stylus">
.Community
  margin 70px auto 0;
  background #EFEFEF
  padding  30px 50px
  box-sizing border-box
  .body
    .left
      .left-top
        margin-bottom 20px
      .contents
        background #fff
        box-sizing border-box
        padding-bottom 15px
        .content
          height 80px
          padding 15px
          box-sizing border-box
          position relative
          cursor pointer
          .content-left
            .el-image
              width 50px
              height 50px
          .content-mid
            .top
              .title
                font-size 18px
                color black
                >span
                  color #fff
                  font-size 14px
                  display: inline-block;
                  width: 32px;
                  height: 17px;
                  text-align: center;
                  margin-left: 10px;
                .top
                  background #333B4A
                .essence
                  background #D60000
          .content-bottom
            margin-top 5px
            >span
              font-size: 12px;
              font-weight: normal;
              color: #999;
              margin-right 8px
              .tag
                font-size: 12px;
                font-weight: normal;
                color: #999;
                margin-right 8px
          .content-right
            position absolute
            right 0
            bottom 0
        .el-pagination
          margin-top 20px
    .right
      .newUsers
        background #fff
        .title
          font-size: 20px;
          font-weight: 400;
          padding: 10px 10px;
          box-sizing border-box
          text-align: center;
          background #F8F8F8
        .users
          box-sizing border-box
          padding-bottom 10px
          .user
            width 75px
            height 95px
            display inline-block
            margin-left 20px
            margin-top 10px
            .el-image
              width 75px
              height 74px
            .username
              text-align center
      .hotPost
        margin-top 30px
        background #fff
        .title
          font-size: 20px;
          font-weight: 400;
          padding: 10px 10px;
          box-sizing border-box
          text-align: center;
          background #F8F8F8
        .posts
          .post
            position relative
            box-sizing border-box
            padding 7.5px 10px
            cursor pointer
            >span
              font-size 12px
              color #999
              margin-left 3px
              >i
                font-size 12px
            .el-divider--horizontal
              margin: 0 0;
</style>
